<template>
  <div class="app-container">
    <el-popover placement="right" width="600" trigger="click">
      <el-image fit="cover" :src="imageUrl" style="width: 50px; height: 50px"/>
      <el-button slot="reference">激活</el-button>
    </el-popover>

    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="活动名称" class="change_input" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker
            placeholder="选择时间"
            v-model="form.date2"
            style="width: 100%"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button type="primary" @click.native.prevent="reset">重置</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>

    <!-- 树状选择 -->
    <h1>树形组件封装</h1>
    <tree-select ref="treeSelect" :original-data-list="treeList"></tree-select>
  </div>
</template>

<script>
// import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
import TreeSelect from '@/components/TreeSelect/index.vue' // use clipboard by v-directive

export default {
  name: "ElementUi",
  components: {
    TreeSelect
  },
  data() {
    return {
      imageUrl: require("./images/78g.jpg"),
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      // rules: {
      //   name: [{required: true, message: "请输入姓名", trigger: 'blur',},
      //     {min: 6, message: "数字位数校验", trigger: 'blur',},
      //     {pattern: /^[A-Za-z0-9_]+$/, message: "正则校验", trigger: 'blur',},
      //     {validator: this.nameRule, message: "自定义校验", trigger: 'blur',}]
      // },
      treeList: [{
        id: 1,
        label: '相思',
        children: [{
          label: '红豆生南国，',
          children: []
        }, {
          label: '挣钱玩车模~',
          children: []
        }, {
          label: '我闭南楼看道书，',
          children: []
        }, {
          label: '幽帘清寂念仙姑~',
          children: []
        }, {
          label: '最肯忘却古人诗，',
          children: []
        }, {
          label: '不屑一顾是相思~',
          children: []
        }, {
          label: '月下独酌思红颜，',
          children: []
        }, {
          label: '花间一壶酒未温~',
          children: []
        }]
      }],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.treeList = [...this.treeList]
    })
  },
  methods: {
    onSubmit(text, event) {
      const list = this.$refs.treeSelect.getTreeSelectData();
      console.log(88888888, list)

      // this.$refs["form"].validate(valid => {
      //   debugger
      // });
    },
    reset() {
      this.$refs["form"].resetFields();
    },
    nameRule(rule, value, callback) {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (!reg.test(value)) {
        callback(new Error(""));
      } else {
        callback();
      }
    },
  }
}
</script>
<style>
.change_input input {
  color: red;
}
</style>
